<!--
 * @Author: your name
 * @Date: 2021-10-22 19:24:25
 * @LastEditTime: 2021-10-22 19:41:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mansion_safe_web\pages\components\footer.vue
-->
<template>
  <div class="footer">
    <div class="logo-box">
      <div class="left-log">
        <img src="../../assets/images/logo-small.png" alt="" />
        <div class="tips">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        </div>
      </div>
      <div class="right">
        <ul class="link">
          <li class="item strong">Lorem Ipsum</li>
          <li class="item strong">Lorem Ipsum</li>
          <li class="item strong">Lorem Ipsum</li>
          <li class="item strong">Lorem Ipsum</li>
          <li class="item">Lorem Ipsum</li>
          <li class="item ">Lorem Ipsum</li>
          <li class="item ">Lorem Ipsum</li>
          <li class="item">Lorem Ipsum</li>
          <li class="item">Lorem Ipsum</li>
          <li class="item ">Lorem Ipsum</li>
          <li class="item">Lorem Ipsum</li>
          <li class="item">Lorem Ipsum</li>
        </ul>
      </div>
    </div>
    <div class="footer-bg"></div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
.footer {
  margin-top: 100px;
  width: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #263c92 200%);
}
.logo-box {
  width: 100%;
  height: 100%;
  padding-right: 320px;
  padding-left: 320px;
  box-sizing: border-box;
  display: flex;
}
.tips {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #222222;
  margin-top: 31px;
}
.left-log {
  width: 14%;
  margin-right: 163px;
}
.link {
  margin-top: 56px;
}
.item {
  float: left;
  width: 25%;
  line-height: 45px;
  font-weight: 400;
  color: #666666;
}
.strong {
  font-weight: bold;
  color: #222222;
}
.footer-bg {
  margin-top: 58px;
  width: 100%;
  height: 70px;
  background: #c0c2c8;
}
</style>
